<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../../static/javascripts/jQuery.js"></script>
    <style>
        .container {
            width: 1100px;
            margin: 0 auto;
        }

        .container::after {
            content: "";
            display: block;
            clear: both;
            overflow: hidden;
        }

        .list {
            width: 228px;
            text-align: center;
            height: 364px;
            position: relative;
            float: left;
            margin-right: 45px;
            position: relative;
        }

        /* .goods:nth-of-type(2) {
            margin-right: 0;
        } */

        .list img {
            width: 100%;
        }

        .list p {
            font-size: 13px;
            line-height: 20px;
        }

        .list p:nth-of-type(2) {
            display: block;
            color: #BB9772;
            line-height: 18px;
            margin-top: 5px;
            font-size: 13px;
        }

        .list h6 {
            display: inline-block;
            border: 1px solid #D5BFA7;
            border-radius: 100px;
            padding: 0 6px 0 8px;
            color: #D5BFA7;
            margin: 8px 3px;
            font-weight: 400;
        }

        .list h5 {
            position: absolute;
            top: 330px;
            display: inline-block;
            width: 107px;
            left: 60px;
            line-height: 28px;
            margin-top: 12px;
            background: none;
            font-size: 13px;
            color: #684029;
            font-weight: 400;
        }

        .list h5:hover {
            color: #684029;
            opacity: 0.4;
            text-decoration: none;
            outline: none;
            cursor: pointer;
        }

        .list .add-cart {
            position: absolute;
            top: 315px;
            display: inline-block;
            width: 107px;
            left: 60px;
            line-height: 28px;
            margin-top: 12px;
            background: none;
            font-size: 13px;
            color: #684029
        }
        .list .add-cart:hover{
            color: #BB9772;
        }
    </style>
</head>

<body>
    <!-- 选项栏  -->
    <div class="header">
        <div class="header-logo">
            <img src="https://oss.51cocoa.com/themes/site/img/logo.png" alt="">
        </div>
        <ul class="nav-box">
            <a href="index.html">首页</a>
            <a href="cake.html">蛋糕</a>
            <a href="cake.html">面包</a>
            <a href="cake.html">冰淇淋</a>
            <a href="cake.html">冻与焗/轻蛋糕</a>
            <a href="cake.html">2小时急达送</a>
        </ul>
        <div class="right-user">
            <a class="username"></a>
            <a href="loginin.html">登录</a>
            <a href="register.html">注册</a>
            <a href="cart.html">购物车</a>
        </div>
    </div>
    <!-- 渲染页面 -->
    <div class="container"></div>
    <script>
        window.onload = function () {
            $(function () {
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:8888/public/list.json",
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        render(data)
                        $(function () {
                            $(".lazy").lazyload()
                        })
                    }
                })

            })
            let container = $(".container")
            function render(res) {
                console.log(res);
                // res = JSON.parse(res);
                container.append(res.list.map(item =>
                    `<div class="list">
                    <a href="详情页.html#id=${item.id}">
                    <img data-original=${item.small_img} alt="" class="lazy">
                    <p>${item.name}</p>
                    <p>￥${item.price}</p>
                    <h6>${item.label1}</h6>
                    <h6>${item.label2}</h6>
                   
                    <a href="javascript:void(0)" onclick="cart(${item.id})"  class="add-cart">加入购物车</a>
                    
                    
                </div>`).join("")
                )
            }

        }

    </script>
    <script src="../javascripts/cart.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>


</body>

</html>